<template>
  <div style="height: 100%;">
    <div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['monitorName'],
    data () {
      return {
        charts: '',
        legentData: [],
        name: '',
        chartsData: [],
        title:''
      }
    },
    computed: {
      options () {
        return {
          title: {
            text: this.title,
            x: 'center',
            align: 'right'
          },
          grid: {
            left: '70px',
            right: '80px',
            bottom: '0px',
            top:'50px'
          },
          color:['#45C2E0', '#C1EBDD', '#FFC851','#5A5476','#1869A0','#FF9393'],
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            y: '10%',
            x: 'right',
            padding: [20,20,20,20],
            orient:'vertial',
            // 设置为可滚动的图例
            type: 'scroll',
            data: this.legentData,
            textStyle:{
              fontSize: 14,//字体大小
              // color: '#ffffff'//字体颜色
            },
          },
          toolbox: {
            right: '10',
            top:'25',
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {},
              dataView: {
                show: true
              },
            }
          },
          series: [{
            name: this.name,
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.chartsData
          }]
        }
      }
    },
    methods: {
      updateEchart (list, title) {
          this.name = '货品占比'
        this.title=title
          this.legentData = list.map(x => x.name)
          this.chartsData = list.map(x => {
            return { value: x.num, name: x.name }
          })

        this.charts.setOption(this.options, true)
      },
      // echart随着窗口改变
      echartResize () {
        this.charts.resize()
      }
    },
    mounted () {
      const Echarts = require('echarts')
      this.charts = Echarts.init(this.$el, null, { locale: 'ZH' })
      window.addEventListener('resize', this.echartResize)
    },
    beforeDestroy () {
      window.removeEventListener('resize', this.echartResize)
    }
  }
</script>
